<template>
    <div class="content-footer">
        <Page
            @on-change="currentChange"
            @on-page-size-change="pageSizeChange"
            :page-size="pageSize"
            :current="current"
            :total="total"
            transfer
            show-total
            show-sizer
            show-elevator
        />
    </div>
</template>
<script>
/**
 * 分页组件
 * props: {
 *  total: 总页码
 *  current: 当前页
 *  pageSize: 每页条数
 * }
 * event: {
 *  change: 页面页数改变都会触发的事件(用来调用查询接口)
 * }
 *
 */
export default {
    name: 'Pagination',
    props: {
        total: {
            default: 0,
            type: Number
        },
        current: {
            default: 1,
            type: Number
        },
        pageSize: {
            default: 10,
            type: Number
        }
    },
    methods: {
        // 页码改变回调
        currentChange (v) {
            this.$emit('update:current', v)
            this.$emit('change', {
                current: this.current,
                pageSize: this.pageSize
            })
        },
        // 每页条数改变回调
        pageSizeChange (v) {
            this.$emit('update:pageSize', v)
            if (this.current === 1) {
                this.$emit('change', {
                    current: this.current,
                    pageSize: this.pageSize
                })
            }
        }
    }
}
</script>
